<!--
 * @Author: your name
 * @Date: 2020-08-24 17:28:17
 * @LastEditTime: 2020-08-25 13:10:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \tinkjsDemo\antd-vue-pro\src\views\pageTest\svgAnimate.vue
-->
<template>
<div>
    <svg class="svg-icon2" aria-hidden="true">
        <use :xlink:href="iconName"></use>
    </svg>
</div>
</template>

<script>
export default {
    mounted() {
        // let el = $('.svg-icon2');
        // console.log(el.html());
    },
    data() {
        return {
            // iconName: '#icon-xingxing'
            iconName: '#icon-methodDrawImage'
        }
    }
}
</script>

<style lang="less">
.svg-icon2 {
    width: 100%;
    height: 700px;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.svg {
    width: 100%;
}

.animateCss {
    stroke-dasharray: 20, 20;
    stroke-dashoffset: 0;
    animation: borderRun 3s linear infinite;
}

@keyframes borderRun {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -240;
    }
}
</style>
